<template>
    <view class="wai">
        <view class="top-sort">
            <view class="sort" @click="defaul1">
                <view class="">默认排序</view>
                <wd-icon name="caret-down-small" size="22px"></wd-icon>
            </view>
            <view class="sort" @click="defaul2">
                <view class="">销量</view>
                <wd-icon name="caret-down-small" size="22px"></wd-icon>
            </view>
            <view class="sort" @click="defaul3">
                <view class="">价格</view>
                <wd-icon name="caret-down-small" size="22px"></wd-icon>
            </view>
        </view>
        <!-- 列表 -->
        <view class="box-list" v-for="it in orderList" :key="it.id">
            <view class="box-top">
                <image class="box-img" :src="it.image" mode=""></image>
                <view>
                    <view>{{ it.title }}</view>
                    <view class="inventory">库存{{ it.stock }}</view>
                    <view class="price">￥{{ it.price }}</view>
                </view>
            </view>
            <view class="box-btom">
                <view class="bianji" @click="edit(it)">编辑</view>
                <view class="bianji xj" @click="xiajia(it)">下架</view>
            </view>
        </view>
    </view>
    <view class="fotter" @click="addGood">
        <view class="shopadd">
            <wd-icon name="add-circle1" size="22px"></wd-icon>
            <view class="addtj">添加商品</view>
        </view>
    </view>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue';
import { utils } from '@/utils/utils.js';
import { shopGoods, orderUp } from '@/api/index.js';
import { onLoad } from '@dcloudio/uni-app';
const props = defineProps(['pages']); //父组件传来的数据
const orderList = ref([]); //上架列表
const total = ref(null); //一共多少数据
const asc = ref('asc'); //排序：asc=正序,desc=倒叙
const sort = ref('weigh'); //排序方式：weigh=权重,price=价格,sales=销量
const emit = defineEmits(['getcode']); //通知父组件，如果切换排序把当前页数变成1
onMounted(() => {
    allorder();
});
// 点击编辑
const edit = (it) => {
    uni.navigateTo({
        url: `/pages/sub/editShop?parmId=${it.id}`
    });
};
// 点击下架、
const xiajia = async (it) => {
    const ret = await orderUp(it.id);
    console.log(77, ret);
    if (ret.code == 1) {
        orderList.value = []; //清空数据
        await emit('getcode', 1); //传父组件，更新当前页数
        allorder(); //刷新列表排序
        utils(ret.msg);
    } else {
        utils(ret.msg);
    }
};
// 点击默认排序
const defaul1 = async () => {
    // 切换正序还是倒序
    if (asc.value == 'asc') {
        asc.value = 'desc';
    } else {
        asc.value = 'asc';
    }
    orderList.value = []; //清空数据
    await emit('getcode', 1); //传父组件，更新当前页数
    allorder(); //刷新列表排序
};
// 点击销量排序
const defaul2 = async () => {
    if (sort.value == 'weigh') {
        sort.value = 'sales';
    } else {
        sort.value = 'weigh';
    }
    orderList.value = []; //清空数据
    await emit('getcode', 1); //传父组件，更新当前页数
    allorder(); //刷新列表排序
};
// 点击价格排序
const defaul3 = async () => {
    if (sort.value == 'weigh') {
        sort.value = 'price';
    } else {
        sort.value = 'weigh';
    }
    orderList.value = []; //清空数据
    await emit('getcode', 1); //传父组件，更新当前页数
    allorder(); //刷新列表排序
};
// 上架列表
const allorder = async () => {
    if (orderList.value.length == total.value) {
        return utils('没有更多数据了...');
    }
    const parameter = {
        page: props.pages,
        status: 'up',
        order: asc.value,
        sort: sort.value
    };
    const ret = await shopGoods(parameter);
    total.value = ret.data.total;
    orderList.value = [...orderList.value, ...ret.data.data];
    console.log('上架', ret);
};
// 点击添加商品
const addGood = () => {
    uni.navigateTo({
        url: '/pages/sub/addShop'
    });
};
// 监听父组触底件传来的页数
watch(
    props,
    (newProps, oldProps) => {
        // 不等于1触发
        if (newProps.pages != 1) {
            allorder();
            console.log(newProps.pages);
        }
    },
    { immediate: false, deep: false }
);
</script>

<style lang="scss" scoped>
.fotter {
    .shopadd {
        .addtj {
            margin-left: 10rpx;
        }
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50rpx;
        height: 80rpx;
        // width: 702rpx;
        background: #ff9b29;
    }
    position: fixed;
    bottom: 0;
    padding: 10rpx 24rpx;
    width: 100vw;
    height: 100rpx;
    background: #fff;
    color: #ffffff;
}
.wai {
    .box-list {
        .box-btom {
            .bianji {
                width: 120rpx;
                height: 56rpx;
                background: #fe630f;
                border-radius: 50rpx;
                text-align: center;
                line-height: 56rpx;
                color: #ffffff;
                font-size: 24rpx;
                margin-left: 24rpx;
            }
            .xj {
                background-color: #ff9b29;
            }
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
        .box-top {
            .price {
                color: #fe0f0f;
            }
            .inventory {
                color: #999999;
                font-size: 24rpx;
                margin-top: 16rpx;
                margin-bottom: 30rpx;
            }
            .box-img {
                width: 154rpx;
                height: 154rpx;
                border-radius: 24rpx;
                margin-right: 26rpx;
            }
            display: flex;
            font-size: 28rpx;
        }
        height: 290rpx;
        padding-top: 40rpx;
        padding-bottom: 24rpx;
        border-bottom: 2rpx solid #f2f2f2;
    }
    .top-sort {
        display: flex;
        .sort {
            display: flex;
            align-items: center;
            margin-right: 66rpx;
            font-size: 24rpx;
            color: #333333;
        }
    }
    padding: 34rpx 24rpx;
    padding-bottom: 200rpx;
}
</style>
